<template>
  <div class="main-container container-limited container-fluid page-holder">
    <page-breadcrumb />
    <div class="easy-container-min flex flex-nowrap">
      <folder-breadcrumb ref="folderBreadcrumb" class="m-l-10">
        <template v-if="isWebAdmin || isSpaceOwner || isSpaceAdmin">
          <el-button v-if="!isFilter" size="small" @click="dialogVisible = true">
            新建目录
          </el-button>
          <el-button size="small" @click="manageMode = !manageMode">
            {{ manageMode ? '取消整理' : '资源整理' }}
          </el-button>
        </template>
      </folder-breadcrumb>
      <router-link :to="`/spaces/${spaceId}/resources/search`" class="el-button m-l-auto">
        查找资源
      </router-link>
      <el-button type="primary" @click="newDoc">创建资源</el-button>
    </div>
    <list-filter />
    <docs-list
      :resources="docs"
      :manage-mode="manageMode"
      :loading="loading"
      @operatedList="loadDocs"
    />
    <pagination :current-page="pagination.current" :page-count="pagination.count" />
    <create-folder-dialog :dialog-visible.sync="dialogVisible" />
    <pre-create-dialog :dialog-visible.sync="docNewDialogVisible" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import PageBreadcrumb from '@/components/spaces/resources-v2/breadcrumb';
import FolderBreadcrumb from '@/views/documents/components/breadcrumb';
import ListFilter from '@/views/documents/components/list-filter';
import DocsList from '@/components/spaces/resources-v2/index/list';
import CreateFolderDialog from '@/views/documents/components/create-folder-dialog';
import PreCreateDialog from '@/views/documents/components/create/pre-create-dialog';
import { formatResources } from '@/components/spaces/resources-v2/format';

export default {
  name: 'Documents',
  components: {
    PageBreadcrumb,
    FolderBreadcrumb,
    ListFilter,
    DocsList,
    CreateFolderDialog,
    PreCreateDialog,
  },
  data() {
    return {
      docs: [],
      loading: false,
      pagination: {
        current: null,
        count: null,
      },
      manageMode: false,
      dialogVisible: false,
      docNewDialogVisible: false,
    };
  },
  computed: {
    ...mapGetters(['isWebAdmin', 'isSpaceOwner', 'isSpaceAdmin']),
    spaceId() { return this.$route.params.spaceId; },
    folderId() { return this.$route.params.folderId; },
    loadDocsParams() {
      return {
        spaceId: this.spaceId,
        folderId: this.folderId,
        page: this.$route.query.page || 1,
        tags: this.$route.query.tags,
        good: this.$route.query.good,
      };
    },
    isFilter() {
      return (this.loadDocsParams.tags && this.loadDocsParams.tags.length)
        || this.loadDocsParams.good;
    },
  },
  created() {
    this.loadDocs();
  },
  methods: {
    // 加载资源列表
    loadDocs() {
      this.loading = true;
      const finalApi = this.isFilter
        ? this.$api.spaceResources.indexFilter
        : this.$api.spaceResources.index;
      finalApi(this.loadDocsParams)
        .then((res) => {
          this.docs = this.addBackFolder(formatResources(res.data), res.parent_id);
          this.pagination.current = res.kaminari.current_page;
          this.pagination.count = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    addBackFolder(results, parentId) {
      const basePath = `/spaces/${this.spaceId}/resources`;
      const backFolder = {
        id: parentId,
        img: 'icon-folder',
        title: '返回上一级',
        type: 'ProductFolder',
        back: true,
        path: parentId ? `${basePath}/${parentId}` : basePath,
      };
      return (!this.isFilter && this.folderId) ? [backFolder].concat(results) : results;
    },
    // 新建资源
    newDoc() {
      this.$refs.folderBreadcrumb.uploadFolderBreadcrumb();
      this.docNewDialogVisible = true;
    },
  },
  watch: {
    loadDocsParams() {
      this.manageMode = false;
      this.loadDocs();
    },
  },
};
</script>

<style></style>
